<template>
	<view class="tabber">
		<view class="tab" 
		v-for="(item,index) in tabberList" 
		:key="index" @tap="navigatorTo(item.pagePath)">
			<image v-if="item.pagePath===currentPage" :src="item.selectedIconPath" mode=""></image>
			<image v-else :src="item.iconPath" mode=""></image>
			<view class="text">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		props:{
			currentPage:{
				type:String,
				default:'index'
			}
		},
		computed:{
			...mapState({
				loginStatus:state=>state.user.loginStatus
			})
		},
		data(){
			return{
				tabberList:[
					{
					    "pagePath": "index",
					    "iconPath": "/static/images/tabbar/index.png",
					    "selectedIconPath": "/static/images/tabbar/index-green.png",
					    "text": "首页"
					},
					{
						"pagePath": "exchange",
						"iconPath": "/static/images/tabbar/exchange.png",
						"selectedIconPath": "/static/images/tabbar/exchange-green.png",
						"text": "同城二手"
					},
					{
						"pagePath": "classification",
						"iconPath": "/static/images/tabbar/garbage.png",
						"selectedIconPath": "/static/images/tabbar/garbage-green.png",
						"text": "本地农副品"
					},
					{
						"pagePath": "consult",
						"iconPath": "/static/images/tabbar/inform.png",
						"selectedIconPath": "/static/images/tabbar/inform-green.png",
						"text": "招商加盟"
					},
					{
					    "pagePath": "my",
					    "iconPath": "/static/images/tabbar/user.png",
					    "selectedIconPath": "/static/images/tabbar/user-green.png",
					    "text": "我的"
					}
				]
			}
		},
		methods:{
			navigatorTo(e){
				console.log(e)
				if(e==='my'){//验证
					// console.log(this.loginStatus)
					// if(this.loginStatus){//跳转至对应页面
						// uni.redirectTo({
						// 	url:`../../pages/${e}/${e}`
						// })
					// }else{
					// 	uni.navigateTo({
					// 		url:"../../pages/login/login"
					// 	})
					// }
					// uni.redirectTo({
					// 	url:`../../pages/${e}/${e}`
					// })
					
					this.navigateTo({
						url:`../../pages/${e}/${e}`,
						animationType:"fade-in",
						animationDuration:0
					})
				}else{//跳转
					//uni.redirectTo:关闭当前页面跳转
					uni.redirectTo({
						url:`../../pages/${e}/${e}`
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tabber{
		background-color: #fff;
		z-index: 9999;
		border-bottom: 2rpx solid #636263;
		position: fixed;
		left:0;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.tab{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				width: 50rpx;
				height: 50rpx;
			}
			.text{
				padding: 5rpx 0;
				font-size: 24rpx;
			}
		}
	}
</style>